<template>
  <view class="purchase-card">
    <image :src="urlConf + 'common/purchase-bg.svg'" mode="scaleToFill" class="p-bg" />
    <view class="p-text">恭喜获得</view>
    <view class="p-title">完美繁花-{{info.title || '年度会员'}}</view>

    <view class="p-con">
      <view class="p-item">{{info.title}}</view>
      <view class="p-item">{{info.smalltext}}</view>
      <view class="p-item">{{info.ftitle}}</view>
    </view>

    <view class="p-btn" @click="close"> <custom-btn>立即体验</custom-btn> </view>
  </view>
</template>

<script setup>
import { urlConf } from "@/config/resource";

import useStore from "@/store";
const { common } = useStore();
const close = () => {
  common.updatePopupOpen(false, "purchase");
  setTimeout(() => {
    uni.navigateBack({ delta: 1 });
  }, 200);
};

const info = computed(() => common.purchaseParams || {});
</script>

<style lang=scss scoped>
.purchase-card {
  width: 650rpx;
  height: 720rpx;
  color: #fff;
  position: relative;
}
.p-bg {
  width: 650rpx;
  height: 720rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.p-text {
  font-weight: 500;
  font-size: 40rpx;
  padding: 40rpx 60rpx 10rpx;
}
.p-title {
  font-weight: 600;
  font-size: 48rpx;
  padding-left: 60rpx;
}

.p-con {
  padding-top: 100rpx;
  font-weight: 600;
  font-size: 36rpx;
  color: #70522c;
  padding-left: 140rpx;
  .p-item {
    height: 80rpx;
    line-height: 80rpx;
  }
}

.p-btn {
  width: 400rpx;
  height: 120rpx;
  line-height: 120rpx;
  font-weight: 500;
  font-size: 40rpx;
  color: #fff;
  background: linear-gradient(90deg, #ff602b 0%, #ff2b2b 100%);
  border-radius: 120rpx;
  margin: 40rpx auto 60rpx;
}
</style>